<template>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="回复内容">
            <el-input v-model="queryInfo.courseReplyText" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
    </el-form>
    <div>
        <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
        <el-button type="danger" icon="Delete" plain>删除</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="courseReplyId" label="编号" width="80" />
        <el-table-column prop="courseReplyText" label="回复内容" width="200" show-overflow-tooltip/>
        <el-table-column prop="courseReplyCreateTime" label="创建时间" width="150" />
        <el-table-column prop="courseTalkId" label="课程交流名" width="100">
            <template #default="scope">
                {{ courseTalk[scope.row.courseTalkId] }}
            </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户名" width="100">
            <template #default="scope">
                {{ user[scope.row.userId] }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template #default="scope">
                <el-button size="small" type="primary" @click="toShow(scope.row)">
                    详情
                </el-button>
                <el-button size="small" @click="toEdit(scope.row)">
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="toDel(scope.row.courseReplyId)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 11-->
    <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 5, 10, 20]" :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 添加修改 对话框 -->
    <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
        <el-form :model="CourseReply">
            <el-form-item label="回复内容" :label-width="formLabelWidth">
                <QuillEditor v-model="CourseReply.courseReplyText" />
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-input v-model="CourseReply.courseReplyCreateTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课程交流名" :label-width="formLabelWidth">
                <template #default="scope">
                    <el-select v-model="CourseReply.courseTalkId" placeholder="请选择">
                        <el-option v-for="(item, index) in courseTalk" :key="item" :label="item" :value="index"
                            v-show="item != null">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <template #default="scope">
                    <el-select v-model="CourseReply.userId" placeholder="请选择">
                        <el-option v-for="(item, index) in user" :key="item" :label="item" :value="index"
                            v-show="item != null">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="saveOrUpdate">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
     <!-- 添加查看详情 对话框 -->
     <el-dialog v-model="showVisible" title="详情内容" width="500">      
            <el-form-item  :label-width="formLabelWidth">
               <div v-html="CourseReply.courseReplyText"></div>
            </el-form-item>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
import QuillEditor from '@/components/QuillEditor.vue';

//查看详情
const showVisible = ref(false);

// 去详情的页面
const toShow = row => {
  showVisible.value = true;
  CourseReply.value = row;
}


const tableData = ref([])

// 修改或添加
const saveOrUpdateVisible = ref(false);
const CourseReply = ref({
    courseReplyId: '',
    courseReplyText: "",
    courseReplyCreateTime: "",
    courseTalkId: '',
    userId: ''

})
const saveOrUpdateTitle = ref('添加');
// 去修改的页面
const toEdit = row => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '编辑';
    CourseReply.value = row;


}

// 去添加的页面
const toAdd = row => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '添加';
    CourseReply.value = {
        courseReplyId: '',
        courseReplyText: "",
        courseReplyCreateTime: "",
        courseTalkId: '',
        userId: ''
    }
}

// 取消修改或保存
const close = () => {
    saveOrUpdateVisible.value = false;

    CourseReply.value = {
        courseReplyId: '',
        courseReplyText: "",
        courseReplyCreateTime: "",
        courseTalkId: '',
        userId: ''
    }
}

// 保存或更新
const saveOrUpdate = () => {
    if (saveOrUpdateTitle.value == '添加') {
        // 调用后端接口添加
        axios.post('/courseReply/add', CourseReply.value)
            .then(resp => {
                // console.log(resp.data)
                let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
                if (result.code == 1) {
                    // 重新获取列表
                    getList();
                    ElMessage({
                        message: '添加成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '添加失败！',
                        type: 'warning',
                    })
                }
            })
    } else {
        // 调用后端接口修改
        axios.put('/courseReply/edit', CourseReply.value)
            .then(resp => {
                // console.log(resp.data)
                let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
                if (result.code == 1) {
                    // 重新获取列表
                    getList();
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '修改失败！',
                        type: 'warning',
                    })

                }
            })
    }
    // 关闭弹框
    saveOrUpdateVisible.value = false;

    CourseReply.value = {
        courseReplyId: '',
        courseReplyText: "",
        courseReplyCreateTime: "",
        courseTalkId: '',
        userId: ''
    }
}




// 定义一个方法当页面加载后立马执行的代码
onMounted(() => {
    // console.log('onMounted');
    getList();
    getCourseTalk();
    getUser();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    courseReplyText: ''

})
const courseTalk = ref([]);
const user = ref([]);
// 查询所有的课程交流信息
const getCourseTalk = () => {
    axios.get('/courseTalk/find', {
        params: {
            pageNum: 1,
            pageSize: 100
        }
    })
        .then(resp => {
            let result = resp.data; // resp是promise对象，.data返回我们自己的标准R
            console.log('result', result)
            if (result.code == 1) {
                for (var i = 0; i < result.data.length; i++) {
                    courseTalk.value[result.data[i].courseTalkId] = result.data[i].courseTalkTitle;
                }
            } else {
                console.log('查询课程交流失败')
            }
            console.log('courseTalk', courseTalk.value)
        })
}
// 查询所有的用户信息
const getUser = () => {
    axios.get('/user/find', {
        params: {
            pageNum: 1,
            pageSize: 100
        }
    })
        .then(resp => {
            let result = resp.data; // resp是promise对象，.data返回我们自己的标准R
            console.log('result', result)
            if (result.code == 1) {
                for (var i = 0; i < result.data.length; i++) {
                    user.value[result.data[i].userId] = result.data[i].userUserName;
                }
            } else {
                console.log('查询用户失败')
            }
            console.log('user', user.value)
        })
}



// 定义一个数据总条数
const total = ref(0);

//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = () => {
    // 使用axios调用后端接口获取数据
    axios.get('/courseReply/findByPage', {
        params: queryInfo.value
    })
        .then(resp => {
            // console.log(resp.data)
            let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
            if (result.code == 1) {
                // 更新总条数
                total.value = result.data.total;
                tableData.value = result.data.list;
            } else {
                console.log('获取列表失败')
            }
        })

}
// 分页
const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
}

// 删除
const toDel = courseReplyId => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用后端接口删除
            axios.delete('/courseReply/' + courseReplyId)
                .then(resp => {
                    // console.log(resp.data)
                    let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R 
                    if (result.code == 1) {
                        // 重新获取列表
                        getList();
                        ElMessage({
                            message: '删除成功！',
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: '删除失败！',
                            type: 'warning',
                        })
                    }
                })


        })
        .catch(() => { })
}
















const formInline = reactive({
    name: '',
    state: '',
    date: '',
})


// 弹框
const showPop = ref(false);
// 默认添加
const isEdit = ref(false);
const dicid = ref(0);
// 添加
const onAdd = row => {
    // 展示弹框
    showPop.value = true;
    isEdit.value = false;
}
// 编辑
const onEdit = row => {
    // console.log('row',row,row.id);
    // 展示弹框
    showPop.value = true;
    isEdit.value = true;
    // 更新id
    dicid.value = row.id;
}
// 弹框关闭
const onCancel = () => {
    // 展示弹框
    showPop.value = false;
}



const onSubmit = () => {
    console.log('submit!')
}

</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;

}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>